const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    entry:'./src/main.js',
    output:{
        // 动态的获取路径
        path:path.resolve(__dirname,'dist'),
        publicPath:'dist/',
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                // 使用多个loader时，是从右向左
                use:['style-loader', 'css-loader', 'less-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载的图片小于limit时，会编译为base64字符串形式
                            // 当加载的图片大于limit时使用file-loader模块加载
                            limit: 49192,
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    plugins:[
        new webpack.BannerPlugin('最终版权归小星星所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new uglifyjsPlugin()
    ],
    devServer:{
        contentBase:'./dist',
        inline:true
    }
}